<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//cdn.staticfile.org/layui/2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

        .top-panel > .layui-card-body {
            height: 60px;
        }

        .top-panel-number {
            line-height: 60px;
            font-size: 30px;
            border-right: 1px solid #eceff9;
        }

        .top-panel-tips {
            line-height: 30px;
            font-size: 12px
        }

        .layuimini-notice:hover {
            background: #f6f6f6;
        }

        .layuimini-notice {
            padding: 7px 16px;
            clear: both;
            font-size: 12px !important;
            cursor: pointer;
            position: relative;
            transition: background 0.2s ease-in-out;
        }

        .layuimini-notice-title, .layuimini-notice-label {
            padding-right: 70px !important;
            text-overflow: ellipsis !important;
            overflow: hidden !important;
            white-space: nowrap !important;
        }

        .layuimini-notice-title {
            line-height: 28px;
            font-size: 14px;
        }

        .layuimini-notice-extra {
            position: absolute;
            top: 50%;
            margin-top: -8px;
            right: 16px;
            display: inline-block;
            height: 16px;
            color: #999;
        }

    </style>
</head>
<body>
<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header"><i class="layui-icon layui-icon-app"></i>&nbsp;&nbsp;工具总数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5 statistics_count">
                        <div class="top-panel-number" id="count1">
                            0
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header"><i class="layui-icon layui-icon-dialogue"></i>&nbsp;&nbsp;留言总数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5 statistics_count">
                        <div class="top-panel-number" id="count2">
                            0
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header"><i class="layui-icon layui-icon-user"></i>&nbsp;&nbsp;用户总数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5 statistics_count">
                        <div class="top-panel-number" id="count3">
                            0
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header"><i class="layui-icon layui-icon-friends"></i>&nbsp;&nbsp;今日新增用户</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5 statistics_count">
                        <div class="top-panel-number" id="count4">
                            0
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header"><i class="layui-icon layui-icon-about"></i>&nbsp;&nbsp;服务器信息</div>
                <div class="layui-card-body layui-text" id="system_info">
                </div>
            </div>
        </div>
    </div>


</div>
<script type="text/html" id="system_info_tpl">
    <table class="layui-table">
        <colgroup>
            <col>
            <col>
        </colgroup>
        <tbody>
        <tr>
            <td>框架版本</td>
            <td>{{d.framework_version}}</td>
        </tr>
        <tr>
            <td>PHP版本</td>
            <td>{{d.php_version}}</td>
        </tr>
        <tr>
            <td>MySQL版本</td>
            <td>{{d.mysql_version}}</td>
        </tr>
        <tr>
            <td>WEB软件</td>
            <td>{{d.software}}</td>
        </tr>
        <tr>
            <td>操作系统</td>
            <td>{{d.os}}</td>
        </tr>
        <tr>
            <td>服务器时间</td>
            <td>{{d.date}}</td>
        </tr>
        </tbody>
    </table>
</script>

<!--</div>-->
<script src="//cdn.staticfile.org/layui/2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../js/common.js" charset="utf-8"></script>
<script src="../js/api.js" charset="utf-8"></script>
<script>
    layui.use(['layer'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laytpl = layui.laytpl;


        httpGet('/admin/system/analysis').then(res => {
            $("#count1").text(res.data.count1);
            $("#count2").text(res.data.count2);
            $("#count3").text(res.data.count3);
            $("#count4").text(res.data.count4);
        })

        httpGet('/admin/system/info').then(res => {
            const view = document.getElementById('system_info');
            const getTpl = document.getElementById('system_info_tpl').innerHTML
            laytpl(getTpl).render(res.data, function (html) {
                view.innerHTML = html;
            });
        })
    });
</script>
</body>
</html>
